<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			th {
				background-color: darkgreen;
				color: white;
			}

			tr:nth-child(even) {
				background-color: lightgreen;
			}

			tr:nth-child(odd) {
				background-color: #ccffcc;
			}
		</style>
	</head>
	<body>
		<table id="contactTable">
			<thead>
				<tr>
					<th>编号</th>
					<th>祝福对象</th>
					<th>祝福者</th>
					<th>字条内容</th>
					<th>发送时间</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

		<script src="jquery-3.7.1.js"></script>
		<script>
			$(document).ready(function() {
				var data = [{
						id: 1,
						recipient: "琦琦",
						sender: "妈妈",
						message: "愿你健康快乐的成长！",
						timestamp: "2021-03-05 13:06:06"
					},
					{
						id: 2,
						recipient: "wgh",
						sender: "无语",
						message: "每天有份好心情！",
						timestamp: "2021-03-05 13:26:17"
					},
					{
						id: 3,
						recipient: "天净沙小晓",
						sender: "wgh",
						message: "煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。",
						timestamp: "2021-03-05 13:36:06"
					},
					{
						id: 4,
						recipient: "明日科技",
						sender: "wgh",
						message: "暂无内容",
						timestamp: "2021-03-05 13:46:06"
					}
				];

				$.each(data, function(index, item) {
					var row = "<tr>";
					row += "<td>" + item.id + "</td>";
					row += "<td>" + item.recipient + "</td>";
					row += "<td>" + item.sender + "</td>";
					row += "<td>" + item.message + "</td>";
					row += "<td>" + item.timestamp + "</td>";
					row += "</tr>";
					$("#contactTable tbody").append(row);
				});
			});
		</script>
	</body>
</html>
